<template>
  <div class="warp-box">
    <el-row class="search-box" :gutter="10">
      <el-col :span="20">
        <!-- <el-select style="width:200px" v-model="parames.state" size="small" placeholder="默认分类">
          <el-option label="默认分类" value="1">
            <span style="float: left">默认分类</span>
            <span style="float: right; color: #8492a6; font-size: 10px">
              <i class="el-icon-edit"></i>
              <i style="margin-left:5px;" class="el-icon-delete"></i>
            </span>
          </el-option>
        </el-select> -->
        <el-input
          style="width:340px"
          v-model="parames.contacts"
          size="small"
          clearable
          placeholder="搜索联系人名称"
        ></el-input>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button size="small" type="text" icon="el-icon-s-open" @click="handleSearch">高级搜索</el-button>
      </el-col>
    </el-row>
    <el-row class="main-box channel1234" style="margin:10px -5px;">
      <el-col :span="24">
        <el-button size="small" style="float:left" type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
        <el-button size="small" icon="el-icon-connection" @click="handleTrans">分配资源</el-button>

        <el-upload
          v-if="daoruBtn"
          style="float:left;margin-left:10px"
          class="upload-demo"
          :headers="myHeaders"
          :action="fileAction"
          :show-file-list="false"
          accept=".XLS,.xlsx"
          :on-success="handleSucess">
          <el-button size="small" icon="el-icon-upload2">导入</el-button>
        </el-upload>
        <el-button v-if="mobanBtn" size="small" style="float:left;margin-left:10px" icon="el-icon-download" @click="handleExport2">下载模板</el-button>
      </el-col>
      <el-col :span="24">
        <el-table v-loading="loading" :data="tableData" style="width: 100%" @row-click="handleRow" :row-class-name="tableRowClassName" @selection-change="handleSelectionChange">
          <el-table-column type="expand" fixed="left">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="录音内容">
                  <span>{{ props.row.voiceConversionContent }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column label="联系人" prop="contacts"></el-table-column>
          <el-table-column label="负责人" width="200" prop="director">
            <template slot-scope="scope">
              <div>{{scope.row.director}}(工号:{{scope.row.directorWorkNumber}})</div>
            </template>
          </el-table-column>
          <el-table-column label="联系电话" prop="contactNumber"></el-table-column>
          <el-table-column label="客户反馈" prop="feedback"></el-table-column>
          <el-table-column prop="contactStatus" label="状态">
            <template slot-scope="scope">
              <div v-if="scope.row.contactStatus">{{scope.row.contactStatus.desc == '无'?'':scope.row.contactStatus.desc}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="distribution" label="分配状态">
            <template slot-scope="scope">
              <div>{{scope.row.distribution?'已分配':'未分配'}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="nextFollowDate"  label="下次跟进时间">
            <template slot-scope="scope">
              <div>{{scope.row.nextFollowDate | formatDate}}</div>
            </template>
          </el-table-column>
          
          <el-table-column prop="voiceConversionException" label="语音转换状态">
            <template slot-scope="scope">
              <div>{{scope.row.voiceConversionException?'异常':'正常'}}</div>
            </template>
          </el-table-column>
          <el-table-column label="地区" prop="area"></el-table-column>
          <!-- <el-table-column prop="signingDate"  label="签单时间">
            <template slot-scope="scope">
              <div>{{scope.row.signingDate | formatDate}}</div>
            </template>
          </el-table-column> -->
          <!-- <el-table-column fixed="right" label="操作" width="100">
            <template>
              <el-button size="mini" type="text" icon="el-icon-search" ></el-button>
            </template>
          </el-table-column> -->
        </el-table>
      </el-col>
      <pages :parames="parames" @render="checkPage"></pages>
    </el-row>
    <createdDialog :dialogData="dialogData" @checkRender="getList"></createdDialog>
    <searchDialog :searchData="searchData" @checkSearch="checkSearch" @resetSearch="resetSearch"></searchDialog>
    <detailDialog :detailData="detailData" @checkRender="getList"></detailDialog>
    <transCreated :createdData="createdData" @checkRender="getList"></transCreated>

  </div>
</template>

<script>
import createdDialog from "./createdDialog.vue"; //新建
import searchDialog from "./opportSearchDialog.vue"; //高级搜索弹窗
import detailDialog from "./opportDetailDialog.vue"; //详情弹窗
import transCreated from '../opportunityManage/transCreated' //变更负责人
export default {
  props: ['type'],
  data() {
    return {
      loading: false,
      parames: {
        page: 1, //页码index
        limits: [10,50,100,200,500],
        limit: 10, //页码最大
        contacts: '', //联系人名称
        totalCount: 0,
        search: [],
        tabKey: this.type,
      },
      dialogData: {
        //新建弹窗
        show: false
      },
      searchData: {
        //搜索弹窗
        show: false
      },
      createdData: {
        show: false
      },
      detailData: {
        //详情弹窗
        show: false
      },
      total: 100,
      myHeaders: {authorization: ''},
      fileAction: this.$api.postEcImport, //附件上传地址
      tableData: [],
      daoruBtn: false,
      mobanBtn: false,
      multipleSelection: []
    };
  },
  components: {
    createdDialog,
    searchDialog,
    detailDialog,
    transCreated
  },
  methods: {
    handleSelectionChange(val) {
        this.multipleSelection = val;
    },
    handleTrans () { //批量转出
        if (this.multipleSelection.length == 0) {
            this.$alert('请至少选择一个商机','提示')
            return false
        }
        let ids = []
        this.multipleSelection.forEach(el=>{
            ids.push(el.id)
        })
        this.createdData.type = 'AllEc'
        this.createdData.ids = ids
        this.createdData.directorId = this.parames.directorId
        this.createdData.show = true
    },
    handleExport2 () {
      window.location.href = this.$api.postEcDownloadTemplate
    },
    search() {
      //查询
      this.parames.page = 1;
      let searchDate = this.parames.search
      let n = 0
      this.parames.search.forEach(el=>{
        if (el.key == 'contacts') {
          n = 1
        }
      })
      if (this.parames.contacts && n == 0) {
        this.parames.search.push({
          key: 'contacts',
          value: this.parames.contacts,
          type: 'string'
        })
      } else if (this.parames.contacts && n == 1) {
        this.parames.search.forEach((el,index)=>{
          if (el.key == 'contacts') {
            el.value = this.parames.contacts
          }
        })
      } else if (!this.parames.contacts && n == 1) {
        this.parames.search.forEach((el,index)=>{
          if (el.key == 'contacts') {
            this.parames.search.splice(index,1)
          }
        })
      }
      this.getList()
    },
    handleSucess (response,fileList) { //上传附件成功返回url
      this.$message({
          message: '上传导入'+response.data.successCount+'条数据',
          type: 'success'
      });
      this.parames.page = 1
      this.getList()
    },
    resetSearch () {
      this.parames.contacts = ''
    },
    handleSearch() {
      //打开高级搜索弹窗
      this.searchData.contacts = this.parames.contacts
      this.searchData.show = true;
    },
    checkSearch (value) {
      this.parames.search = value
      value.forEach(el=>{
        if(el.key == 'contacts') {
          this.parames.contacts = el.value
        }
      })
      this.parames.page = 1
      this.getList()
    },
    checkPage () {
      this.getList()
    },
    handleAdd() {//新建
      this.dialogData.show = true
      this.dialogData.title = '添加EC机器人'
    },
    handleRow(row) {
      //点击某一行数据打开详情
      this.detailData.id = row.id
      this.detailData.show = true
    },
    tableRowClassName({ row, rowIndex }) {
      //斑马表格
      if (rowIndex % 2 === 1) {
        return "warning-row";
      } else {
        return "success-row";
      }
      return "";
    },
    getList () { //获取页面数据
      this.loading = true
      this.$post(this.$api.postEcList,this.parames).then(response => {
        if (response.data.succeed) {
            this.parames.totalCount = response.data.totalCount
            this.tableData = response.data.data
        }
        setTimeout(() => {
          this.loading = false
        }, 200);
      })
    },
    tableRowClassName({ row, rowIndex }) {
      //斑马表格
      if (rowIndex % 2 === 1) {
        return "warning-row";
      } else {
        return "success-row";
      }
      return "";
    }
  },
  mounted() {
    this.myHeaders.authorization = this.$utils.getLocalStorage('usertoken')
    let buttonLimit = this.$utils.getLocalStorage('buttonlist')  //按钮缓存
    if (buttonLimit.indexOf('k069') !== -1) {
      this.daoruBtn = true
    }
    if (buttonLimit.indexOf('k074') !== -1) {
      this.mobanBtn = true
    }
    this.getList()
  }
};
</script>

<style>
.el-table .warning-row {
  background: #f9f9f9;
}
.el-table .success-row {
  background: #fff;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>